﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta charset="UTF-8">
    <title>AdminSE</title>
    <!-- 站点定义 -->
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <link rel="icon" href="../Content/dist/img/icon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="../Content/dist/img/icon.ico" type="image/x-icon" />
    <style type="text/css">body{font-family:"Microsoft YaHei","Lato","Helvetica Neue",Helvetica,Arial,sans-serif;}</style>
    <!-- 浏览器版本检测 -->
    <script type="text/javascript">
    var browser=navigator.appName;
    var b_version=navigator.appVersion;
    var version=parseFloat(b_version);
    if ((browser=="Microsoft Internet Explorer") && (version<5))
        location.href = 'BrownerToUpdate.html';
    </script>

    <!-- 第三方css -->
    <link href="../Content/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../Content/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../Content/plugins/iCheck/all.css" rel="stylesheet" type="text/css" />
    <link href="../Content/dist/css/AdminLTE.css" rel="stylesheet" type="text/css" />
    <link href="../Content/dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
    <link href="../Content/plugins/toastr/toastr.min.css" rel="stylesheet" type="text/css" />
    <link href="../Content/plugins/highlight/styles/default.css" rel="stylesheet" type="text/css" />
    <link href="../Content/dist/css/base.css" rel="stylesheet" type="text/css" />

    <!-- 页面专属css -->
    <script src='../Content/plugins/placeholder/placeholder.min.js'></script>
    <style>
    svg[id^="ex-"] {
        fill: none;
        stroke: currentColor;
        stroke-width:3px;
    }
    </style>
  </head>
  <body class="skin-blue sidebar-mini">
    <div class="overlay" style="display:none;">
      <div class="loading">
        <div class="loading-center">
          <div class="loading-center-absolute">
            <div class="object object_four"></div>
            <div class="object object_three"></div>
            <div class="object object_two"></div>
            <div class="object object_one"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper">

      <header class="main-header">
        <!-- Logo -->
        <a href="/" class="logo">
          <span class="logo-mini" title="AdminSE"><b>AdminSE</b></span>
          <span class="logo-lg"><b>Admin</b>SE</span>
        </a>
        <!-- 导航头部 -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- 左侧边栏触发按钮-->
          <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button" title="收缩/展开">
            <span class="sr-only">收缩/展开导航</span>
          </a>
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <!-- 用户帐户栏 -->
              <li class="dropdown user user-menu">
                <a href="" class="dropdown-toggle" data-toggle="dropdown">
                  <img src="../Content/dist/img/DefaultHead.png" class="user-image" alt="头像"/>
                  <span class="hidden-xs">用户名</span>
                </a>
                <ul class="dropdown-menu">
                  <!-- 用户简介 -->
                  <li class="user-header">
                    <a href="#" style="background-color: transparent" title="更换头像">
                      <img src="../Content/dist/img/DefaultHead.png" class="img-circle" alt="User Image" />
                    </a>
                    <p>
                      自定义用户信息
                      <small>备注等内容</small>
                    </p>
                  </li>
                  <li class="user-footer">
                    <div class="pull-left">
                      <a href="#" class="btn btn-primary">编辑</a>
                    </div>
                    <div class="pull-right">
                      <a href="#" class="btn btn-primary">注销</a>
                    </div>
                  </li>
                </ul>
              </li> <!-- end 用户帐户栏 -->
              <!-- 右侧边栏触发按钮 -->
              <li>
                <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
              </li> <!-- end 右侧边栏触发按钮 -->
            </ul>
          </div>
        </nav> <!-- end 导航头部 -->
      </header>

      <!-- 左侧菜单栏 -->
      <aside class="main-sidebar">
        <section class="sidebar">
          <!-- 搜索栏 -->
          <form action="#" method="get" class="sidebar-form">
            <div class="input-group" title="功能未开放">
              <input type="text" name="q" class="form-control" placeholder="请输入搜索内容"/>
              <span class="input-group-btn">
                <button type='button' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form><!-- end 搜索栏 -->

          <!-- 菜单栏主体 -->
          <ul class="sidebar-menu"></ul>

        </section>
      </aside> <!-- end 左侧菜单栏 -->

      <!-- 页面主体内容 -->
      <div class="content-wrapper">
        <section class="content-header">
          <h1>
            插件
          </h1>
        </section>

        <!-- content -->
        <section class="content">
          <div class="row">
            <section class="col-xs-12">
              <div class="box" id="fastclick">
                <div class="box-header">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse">
                    <i class="fa fa-minus"></i>
                  </button>
                  <h3 class="box-title">fastclick</h3>
                </div>
                <div class="box-body">
                  <p>官网：<a href="https://github.com/ftlabs/fastclick">fastclick-github</a></p>
                  <p>该插件用于处理移动端 click 事件 300 毫秒延迟。</p>
                  <p>1. 为什么存在延迟？</p>
                  <p>根据 Google 开发者文档：<br />
                    ...mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap. <br />
                    从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢？ 因为它想看看你是不是要进行双击（double tap）操作。
                  </p>
                  <br />
                  <p>2. 兼容性</p>
                  <ul>
                    <li>Mobile Safari on iOS 3 and upwards</li>
                    <li>Chrome on iOS 5 and upwards</li>
                    <li>Chrome on Android (ICS)</li>
                    <li>Opera Mobile 11.5 and upwards</li>
                    <li>Android Browser since Android 2</li>
                    <li>PlayBook OS 1 and upwards</li>
                  </ul>
                  <br />
                  <p>3. 不应用 FastClick 的场景</p>
                  <ol>
                    <li>桌面浏览器；</li>
                    <li>如果 viewport meta 标签 中设置了 width=device-width， Android 上的 Chrome 32+ 会禁用 300ms 延时；</li>
                    <li>viewport meta 标签如果设置了 user-scalable=no，Android 上的 Chrome（所有版本）都会禁用 300ms 延迟。</li>
                    <li>IE10 中，可以使用 css 属性 -ms-touch-action: none 禁止元素双击缩放</li>
                  </ol>
                  <br />
                  <p>4. 使用：（建议加入全局）</p>
                  <pre><code class="JavaScript">FastClick.attach(document.body);</code></pre>
                </div>
              </div>

              <div class="box" id="iCheck">
                <div class="box-header">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse">
                    <i class="fa fa-minus"></i>
                  </button>
                  <h3 class="box-title">iCheck</h3>
                </div>
                <div class="box-body">
                  <p>官网：<a href="https://github.com/fronteed/iCheck">iCheck-github</a></p>
                  <p>中文：<a href="http://www.bootcss.com/p/icheck/">iCheck-中文</a></p>
                  <p>CheckBox 和 Radio 的美化插件，特色：</p>
                  <ul>
                    <li>在不同浏览器和设备上都有相同的表现 — 包括 桌面和移动设备</li>
                    <li>支持触摸设备 — iOS、Android、BlackBerry、Windows Phone</li>
                    <li>支持键盘导航 — Tab、Spacebar、Arrow up/down 和其它快捷键</li>
                    <li>方便定制 — 用HTML 和 CSS 即可为其设置样式 (试试 6 套针对Retina屏幕的皮肤吧)</li>
                    <li>支持 jQuery 和 Zepto JavaScript工具库</li>
                    <li>体积小巧 — gzip压缩后只有1 kb</li>
                    <li>25 种参数 用来定制复选框（checkbox）和单选按钮（radio button）</li>
                    <li>8 个回调事件 用来监听输入框的状态</li>
                    <li>7 个方法 用来通过编程方式控制输入框的状态</li>
                    <li>能够将输入框的状态变化同步回原始输入框中， 支持所有选择器</li>
                  </ul>
                  <br />
                  <div class="row bg-black">
                    示例：flat皮肤，blue色彩<br /><br />
                    <div class="col-xs-6">
                      <label><input type='checkbox' name="iCheckbox"> 正常</label><br />
                      <label><input type='checkbox' name="iCheckbox" checked> 选中</label><br />
                      <label><input type='checkbox' name="iCheckbox" disabled="disabled"> 禁用</label><br />
                      <label><input type='checkbox' name="iCheckbox" disabled="disabled" checked> 选中禁用</label>
                    </div>
                    <div class="col-xs-6">
                      <label><input type='radio' name="iCheckRadio1"> 正常</label><br />
                      <label><input type='radio' name="iCheckRadio1" checked> 选中</label><br />
                      <label><input type='radio' name="iCheckRadio2" disabled="disabled"> 禁用</label><br />
                      <label><input type='radio' name="iCheckRadio2" disabled="disabled" checked> 选中禁用</label>
                    </div>
                  </div>
                  <br />
                  <p>
                    1. 使用：<br />
                    1.1 css及js：<br />
                    <pre><code class="Html">&lt;link href="../Content/plugins/iCheck/all.css" rel="stylesheet" type="text/css" /&gt;<br />&lt;script src='../Content/plugins/iCheck/icheck.min.js'&gt;&lt;/script&gt;</code></pre>
                    1.2 Dom：<br />
                    <pre><code class="Html">&lt;input type='checkbox'&gt;</code></pre>
                    1.3 激活：<br />
                    <pre><code class="JavaScript">$("[type='checkbox']").iCheck();</code></pre>
                  </p>
                  <br />
                  <p>2. 参数：（参数太多，抽常用的来说）</p>
                  <pre><code class="JavaScript">/* 复选框皮肤样式，'icheckbox_*_#'<br />   *可选为： minimal/square/flat/line/polaris/futurico<br />   #可选为： blue/purple/green/red/yellow/orange/aero/grey/pink*/<br />checkboxClass: 'icheckbox',<br />radioClass: 'iradio',    /* 单元框皮肤样式，参考checkboxClass*/</code></pre>
                  <br />
                  <p>
                    3. 方法：<br />
                    $('input').iCheck('check'); — 将输入框的状态设置为checked <br />
                    $('input').iCheck('uncheck'); — 移除 checked 状态 <br />
                    $('input').iCheck('toggle'); — toggle checked state <br />
                    $('input').iCheck('disable'); — 将输入框的状态设置为 disabled <br />
                    $('input').iCheck('enable'); — 移除 disabled 状态 <br />
                    $('input').iCheck('update'); — apply input changes, which were done outside the plugin <br />
                    $('input').iCheck('destroy'); — 移除iCheck样式
                  </p>
                  <br />
                  <p>
                    4. 事件：<br />
                    ifClicked 用户点击了自定义的输入框或与其相关联的label <br />
                    ifChanged 输入框的 checked 或 disabled 状态改变了 <br />
                    ifChecked 输入框的状态变为 checked <br />
                    ifUnchecked checked 状态被移除 <br />
                    ifDisabled  输入框状态变为 disabled <br />
                    ifEnabled disabled 状态被移除 <br />
                    ifCreated 输入框被应用了iCheck样式 <br />
                    ifDestroyed iCheck样式被移除
                  </p>
                </div>
              </div>

              <div class="box" id="highlight">
                <div class="box-header">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse">
                    <i class="fa fa-minus"></i>
                  </button>
                  <h3 class="box-title">highlight 代码高亮</h3>
                </div>
                <div class="box-body">
                  <p>1. 官网：<a href="https://highlightjs.org/">highlight.js</a></p>
                  <p>2. 简介：Highlight 用于将源码输出为语法高亮的格式文件，支持180种编程语言（本模板集成了24种）。</p>
                  <p>
                    3. 使用：<br />
                    3.1 添加css及js：<br />
                    <pre><code class="Html">&lt;link href="../Content/plugins/highlight/styles/default.css" rel="stylesheet" type="text/css" /&gt;<br />&lt;script src="../Content/plugins/highlight/highlight.min.js" type="text/javascript"&gt;&lt;/script&gt;</code></pre>
                    3.2 添加代码块：
                    <pre><code class="Html">&lt;pre&gt;&lt;code class="Html"&gt;……&lt;/code&gt;&lt;/pre&gt;</code></pre>
                    其中code的class属性为需要格式化成为的语言，省略号为代码原文，注意需要将 "<span class="text-red">尖括号&lt;&gt;</span>" 替换成 "<span class="text-red">&amp;lt;&amp;gt;</span>"，并且建议采用 <span class="text-red">&lt;br /&gt;</span> 代替<span class="text-red">换行符</span>; <span class="text-red">&amp;nbsp;</span> 代替<span class="text-red">空格</span>，能产生更好的排版效果。
                  </p>
                  <p>
                    4. 附加信息：AdminSE支持的高亮语言样式列表<br />
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">Apache</span>
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">Bash</span>
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">C#</span>
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">C++</span>
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">CSS</span>
                    <br />
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">CoffeeScript</span>
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">Diff</span>
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">HTML</span>
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">XML</span>
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">HTTP</span>
                    <br />
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">Ini</span>
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">JSON</span>
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">Java</span>
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">JavaScript</span>
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">Makefile</span>
                    <br />
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">Markdown</span>
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">Nginx</span>
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">Objective-C</span>
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">PHP</span>
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">Perl</span>
                    <br />
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">Python</span>
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">Ruby</span>
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">SQL</span>
                    <span class="bg-black-gradient" style="padding:5px;margin:10px;line-height:30px">Django</span>
                  </p>
                </div>
              </div>

              <div class="box" id="placeholder">
                <div class="box-header">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse">
                    <i class="fa fa-minus"></i>
                  </button>
                  <h3 class="box-title">placeholder</h3>
                </div>
                <div class="box-body">
                  <!-- todo -->
                  <p>官网：<a href="https://github.com/hustcc/placeholder.js">placeholder-github</a></p>
                  <p>中文：<a href="https://github.com/hustcc/placeholder.js/blob/master/README-zh.md">placeholder-中文</a></p>
                  <p>placeholder是一个Javascript库，用于在浏览器端生成placeholder image，提供完善的配置和简单的方法。</p>
                  <ul>
                    <li>不依赖任何 js 框架，比如 jq</li>
                    <li>小于 1k ，具体是0.98k，增加img配置方式之后，为1.52kb</li>
                    <li>配置项多，都有默认值</li>
                    <li>使用简单</li>
                  </ul>
                  <br />
                  示例1. 获取图片，如果获取失败则显示 Image 404：<br />
                  <img src="image_origin.png" onerror="this.src=placeholder.getData({text:'Image 404',size:'256x64'})"><br />
                  示例2. 自定义占位图片大小，并显示自定义文字。：<br />
                  <img options="size=256x64&text=Hello%20World!" class="placeholder" /><br />
                  <br />
                  <p>
                    1. 使用：<br />
                    1.1 js：<br />
                    <pre><code class="Html">&lt;script src='../Content/plugins/placeholder/placeholder.min.js'&gt;&lt;/script&gt;</code></pre>
                    1.2 Dom1：调用placeholder.js的方法进行替换（注意，这种方式需要js文件放在调用之前）<br />
                    <pre><code class="Html">&lt;img src="image_origin.png" onerror="this.src=placeholder.getData({text: 'Image 404'})"/&gt;</code></pre>
                    1.3 Dom2：使用URL参数的方式配置Img的属性并携带参数options<br />
                    <pre><code class="Html">&lt;img options="size=256x128&text=Hello!" class="placeholder" /&gt;</code></pre>
                    1.4 如果采用js方式产生<br />
                    <pre><code class="JavaScript">$('imgselector')[0].src = placeholder.getData(options);</code></pre>
                  </p>
                  <br />
                  <p>
                    2. 参数：（用在options属性中或者在placeholder.getData方法中均可）<br />
                    要注意的是：<br />
                    2.1 如果使用getData方法，参数的配置均需要添加引号，如size:'256x64'<br />
                    2.2 参数中的text值应该被encodeURIComponent转码，主要包括： % 为 %25, & 为 %26, = 为 %3D, 空格 为 %20 etc.
                  </p>
                  <ul>
                    <li>size: placeholder图片尺寸. 例如: 256x128, 默认: 128x128.</li>
                    <li>bgcolor: 背景颜色. 例如: #969696. 默认: random.</li>
                    <li>color: 前景颜色，文字颜色. 例如: #ccc. 默认: random.</li>
                    <li>text: 自定义文本内容. 例如: Hello World, 你好. 默认: equal to size.</li>
                    <li>fstyle: 字体样式. 可以是 normal / italic / oblique. 默认: oblique.</li>
                    <li>fweight: 字体weight. 可以是 normal / bold / bolder / lighter / Number. 默认: bold.</li>
                    <li>fsize: 字体大小. 默认: 自动 计算字体大小防止文字超出图片大小.</li>
                    <li>ffamily: 字体. 默认: consolas.</li>
                  </ul>
                  <br />
                  <p>
                    3. 方法：<br />
                    placeholder.getData(opts): 获得placeholder图片的base64字符串，可以直接在img标签的src属性中使用，或者在css的背景中使用。<br />
                    placeholder.getCanvas(opts): 获得canvas元素, 可以直接插入到DOM结构中。
                  </p>
                  <br />
                  <p>
                    4. 事件：<br />
                    暂缺--无。
                  </p>
                </div>
              </div>

              <div class="box" id="segment-letters">
                <div class="box-header">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse">
                    <i class="fa fa-minus"></i>
                  </button>
                  <h3 class="box-title">segment-letters</h3>
                </div>
                <div class="box-body">
                  <!-- todo -->
                  <p>segment官网：<a href="https://github.com/lmgonzalves/segment">segment-github</a></p>
                  <p>d3-ease官网：<a href="https://github.com/d3/d3-ease">d3-ease-github</a></p>
                  <p>letters官网：<a href="https://github.com/lmgonzalves/letters">letters-github</a></p>
                  <p>demo： <a href="http://tympanus.net/Development/AnimatedLetters/">demo</a></p>
                  <p>well，其实这是一个集合了3个js集的功能，包括segment、d3-ease 和 letters。关于前两者不作过多介绍，仅介绍Letters：基于SVG的字母动画脚本。</p>
                  <p>由于以下两个原因，后续将对该脚本进行改进</p>
                  <ul>
                    <li>仅支持英文小写字母</li>
                    <li>体积过于庞大</li>
                  </ul>
                  <br />
                  示例(点击可重复查看效果)：<br />
                  <div class="bg-blue">
                    <div id="Letters">Letters</div>
                  </div>
                  <br />
                  <p>
                    1. 使用：<br />
                    1.1 js：<br />
                    <pre><code class="Html">&lt;script src="../Content/plugins/segment-letters/segment.min.js"&gt;&lt;/script&gt;<br />&lt;script src="../Content/plugins/segment-letters/d3-ease.v0.6.js"&gt;&lt;/script&gt;<br />&lt;script src="../Content/plugins/segment-letters/letters.js"&gt;&lt;/script&gt;</code></pre>
                    1.2 Dom：<br />
                    <pre><code class="Html">&lt;div id="Letters"&gt;Letters&lt;/div&gt;</code></pre>
                    1.3 激活<br />
                    <pre><code class="JavaScript">LetterObj = new Letters($('jqselector')[0], options);<br />LetterObj.show();</code></pre>
                  </p>
                  <br />
                  <p>2. 参数</p>
                  <div class="table-responsive">
                    <table class="table table-hover table-bordered">
                      <thead>
                        <tr>
                          <th>参数</th><th>默认值</th><th>描述</th>
                        </tr>
                      </thead>
                      <tbody>
                          <tr><td>size</td><td>100</td><td>字体大小</td></tr>
                          <tr><td>weight</td><td>1</td><td>字宽</td></tr>
                          <tr><td>rounded</td><td>false</td><td>文字边缘圆角（字宽较大的时候效果明显）</td></tr>
                          <tr><td>color</td><td>'#5F6062'</td><td>文字的颜色，可以是一个color字符串，<br />也可以是一个color字符串数组，<br />如果文字的个数多于数组元素个数，则用最后一个元素着色后面的文字</td></tr>
                          <tr><td>duration</td><td>1</td><td>float 反弹力度</td></tr>
                          <tr><td>delay</td><td>[0, 0.05]</td><td>延迟，可以是二元数组或者一个浮点数，表示前后延迟的时间单位</td></tr>
                          <tr><td>fade</td><td>0.5</td><td></td></tr>
                          <tr>
                            <td>easing</td><td>d3_ease.easeCubicInOut.ease</td>
                            <td>
                              动画方法，可选：<br />
                              <ul>
                                <li>d3_ease.easeLinearIn.ease</li>
                                <li>d3_ease.easeLinearOut.ease</li>
                                <li>d3_ease.easeLinearInOut.ease</li>
                                <li>d3_ease.easeQuadIn.ease</li>
                                <li>d3_ease.easeQuadOut.ease</li>
                                <li>d3_ease.easeQuadInOut.ease</li>
                                <li>d3_ease.easeCubicIn.ease</li>
                                <li>d3_ease.easeCubicOut.ease</li>
                                <li>d3_ease.easeCubicInOut.ease</li>
                                <li>d3_ease.easePolyIn.ease</li>
                                <li>d3_ease.easePolyOut.ease</li>
                                <li>d3_ease.easePolyInOut.ease</li>
                                <li>d3_ease.easeSinIn.ease</li>
                                <li>d3_ease.easeSinOut.ease</li>
                                <li>d3_ease.easeSinInOut.ease</li>
                                <li>d3_ease.easeExpIn.ease</li>
                                <li>d3_ease.easeExpOut.ease</li>
                                <li>d3_ease.easeExpInOut.ease</li>
                                <li>d3_ease.easeCircleIn.ease</li>
                                <li>d3_ease.easeCircleOut.ease</li>
                                <li>d3_ease.easeCircleInOut.ease</li>
                                <li>d3_ease.easeBounceIn.ease</li>
                                <li>d3_ease.easeBounceOut.ease</li>
                                <li>d3_ease.easeBounceInOut.ease</li>
                                <li>d3_ease.easeBackIn.ease</li>
                                <li>d3_ease.easeBackOut.ease</li>
                                <li>d3_ease.easeBackInOut.ease</li>
                                <li>d3_ease.easeElasticIn.ease</li>
                                <li>d3_ease.easeElasticOut.ease</li>
                                <li>d3_ease.easeElasticInOut.ease</li>
                              </ul>
                            </td>
                          </tr>
                          <tr><td>individualDelays</td><td>false</td><td></td></tr>
                      </tbody>
                    </table>
                  </div>
                  <br />
                  <p>3. 方法：（看了源码有很多方法，不过没有用过，所以也不好说，仅列举我用过的。）</p>
                  <div class="table-responsive">
                    <table class="table table-hover table-bordered">
                      <thead>
                        <tr>
                          <th>方法</th><th>示例</th><th>描述</th>
                        </tr>
                      </thead>
                      <tbody>
                          <tr><td>show</td><td>.show(options);</td><td>显示字母，options接受上面2中的参数，并接受callback:function 用于在显示完成后执行</td></tr>
                          <tr><td>hide</td><td>.hide(options);</td><td>显示字母，options接受上面2中的参数，并接受callback:function 用于在显示完成后执行</td></tr>
                      </tbody>
                    </table>
                  </div>
                  <br />
                  <p>
                    4. 事件：<br />
                    暂缺
                  </p>
                </div>
              </div>

              <div class="box" id="vivus">
                <div class="box-header">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse">
                    <i class="fa fa-minus"></i>
                  </button>
                  <h3 class="box-title">vivus</h3>
                </div>
                <div class="box-body">
                  <!-- todo -->
                  <p>官网：<a href="http://maxwellito.github.io/vivus/">vivus</a></p>
                  <p>vivus是一个不依赖于任何脚本的js库，能描画任何svg路径，缺点是这个路径需要用户自己画。</p>
                  <br />
                  示例<br />
                  <div class="row">
                    <div class="col-md-3">
                      <svg id="ex-vivus1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
                      width="100%" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200">
                        <circle cx="100" cy="100" r="90"/>
                        <circle cx="100" cy="100" r="85.74"/>
                        <circle cx="100" cy="100" r="72.947"/>
                        <circle cx="100" cy="100" r="39.74"/>
                        <line x1="34.042" y1="131.189" x2="67.047" y2="77.781"/>
                        <line x1="31.306" y1="75.416" x2="92.41" y2="60.987"/>
                        <line x1="68.81" y1="34.042" x2="122.219" y2="67.046"/>
                        <line x1="124.584" y1="31.305" x2="139.013" y2="92.409"/>
                        <line x1="165.957" y1="68.809" x2="132.953" y2="122.219"/>
                        <line x1="168.693" y1="124.584" x2="107.59" y2="139.012"/>
                        <line x1="131.19" y1="165.957" x2="77.781" y2="132.953"/>
                        <line x1="75.417" y1="168.693" x2="60.987" y2="107.59"/>
                      </svg>
                    </div>

                    <div class="col-md-9">
                      <div class="timing-description">
                      <div>类型：
                        <div class="btn-group">
                          <button name="vivus-type" class="btn btn-primary">delayed</button>
                          <button name="vivus-type" class="btn btn-default">async</button>
                          <button name="vivus-type" class="btn btn-default">oneByOne</button>
                        </div>
                      </div>
                      <br />
                      <div>路径时间参数：
                        <div class="btn-group">
                          <button name="vivus-path" class="btn btn-primary">LINEAR</button>
                          <button name="vivus-path" class="btn btn-default">EASE</button>
                          <button name="vivus-path" class="btn btn-default">EASE_IN</button>
                          <button name="vivus-path" class="btn btn-default">EASE_OUT</button>
                          <button name="vivus-path" class="btn btn-default">EASE_OUT_BOUNCE</button>
                        </div>
                      </div>
                      <br />
                      <div>动画时间参数：
                        <div class="btn-group">
                          <button name="vivus-anim" class="btn btn-primary">LINEAR</button>
                          <button name="vivus-anim" class="btn btn-default">EASE</button>
                          <button name="vivus-anim" class="btn btn-default">EASE_IN</button>
                          <button name="vivus-anim" class="btn btn-default">EASE_OUT</button>
                          <button name="vivus-anim" class="btn btn-default">EASE_OUT_BOUNCE</button>
                        </div>
                      </div>
                    </div>
                    </div>

                  </div>
                  <br />
                  <p>
                    1. 使用：<br />
                    1.1 js：<br />
                    <pre><code class="Html">&lt;script src='../Content/plugins/vivus/vivus.min.js'&gt;&lt;/script&gt;</code></pre>
                    1.2 Dom1+SVG：<br />
                    <pre><code class="Html">&lt;img src="image_origin.png" onerror="this.src=placeholder.getData({text: 'Image 404'})"/&gt;</code></pre>
                    1.3 Dom2：使用URL参数的方式配置Img的属性并携带参数options<br />
                    <pre><code class="Html">&lt;img options="size=256x128&text=Hello!" class="placeholder" /&gt;</code></pre>
                    1.4 如果采用js方式产生<br />
                    <pre><code class="JavaScript">$('imgselector')[0].src = placeholder.getData(options);</code></pre>
                  </p>
                  <br />
                  <p>2. 参数：（挑几个来翻译）</p>
                  <div class="table-responsive">
                    <table class="table table-hover table-bordered">
                      <thead>
                        <tr><th>参数</th><th>默认值</th><th>描述</th></tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><code>type</code></td>
                          <td>delayed</td>
                          <td>动画类型：<code>delayed</code>, <code>async</code>, <code>oneByOne</code>, <code>script</code>, <code>scenario</code> or <code>scenario-sync</code>.</td>
                        </tr>
                        <tr>
                          <td><code>file</code></td>
                          <td>null</td>
                          <td>Link to the SVG to animate. If set, Vivus will create an object tag and append it to the DOM element given to the constructor. Be careful, use the <code>onReady</code> callback before playing with the Vivus instance.</td>
                        </tr>
                        <tr>
                          <td><code>start</code></td>
                          <td>inViewport</td>
                          <td>Defines how to trigger the animation (<code>inViewport</code> once the SVG is in the viewport, <code>manual</code> gives you the freedom to call draw method to start, <code>autostart</code> makes it start right now)</td>
                        </tr>
                        <tr>
                          <td><code>duration</code></td>
                          <td>200</td>
                          <td>动画持续的时间，单位：帧</td>
                        </tr>
                        <tr>
                          <td><code>delay</code></td>
                          <td>integer</td>
                          <td>画第一条和最后一条路径的时间延迟，单位：帧 (仅<code>delayed</code>模式下有效).</td>
                        </tr>
                        <tr>
                          <td><code>onReady</code></td>
                          <td>function</td>
                          <td>Function called when the instance is ready to play.</td>
                        </tr>
                        <tr>
                          <td><code>pathTimingFunction</code></td>
                          <td>function</td>
                          <td>每一条路径的时间函数。赋值方式类似于： <code>Vivus.LINEAR</code>/<code>Vivus['LINEAR']</code></td>
                        </tr>
                        <tr>
                          <td><code>animTimingFunction</code></td>
                          <td>function</td>
                          <td>SVG整体的时间函数。赋值方式参考 pathTimingFunction</td>
                        </tr>
                        <tr>
                          <td><code>dashGap</code></td>
                          <td>integer</td>
                          <td>Whitespace extra margin between dashes. Increase it in case of glitches at the initial state of the animation. [Default: <code>2</code>]</td>
                        </tr>
                        <tr>
                          <td><code>forceRender</code></td>
                          <td>boolean</td>
                          <td>Force the browser to re-render all updated path items. By default, the value is <code>true</code> on IE only. (check the 'troubleshoot' section for more details).</td>
                        </tr>
                        <tr>
                          <td><code>selfDestroy</code></td>
                          <td>boolean</td>
                          <td>Removes all extra styling on the SVG, and leaves it as original.</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <br />
                  <p>3. 方法：</p>
                  <div class="table-responsive">
                    <table class="table table-hover table-bordered">
                      <thead>
                        <tr><th>方法</th><th>描述</th></tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td><code>play(speed)</code></td>
                          <td>图画的显示速度，0~1表示慢速，大于1快速。[默认: <code>1</code>]</td>
                        </tr>
                        <tr>
                          <td><code>stop()</code></td>
                          <td>停止画图。</td>
                        </tr>
                        <tr>
                          <td><code>reset()</code></td>
                          <td>Reinitialises the SVG to the original state: undrawn.</td>
                        </tr>
                        <tr>
                          <td><code>finish()</code></td>
                          <td>Set the SVG to the final state: drawn.</td>
                        </tr>
                        <tr>
                          <td><code>setFrameProgress(progress)</code></td>
                          <td>Set the progress of the animation. Progress must be a number between 0 and 1.</td>
                        </tr>
                        <tr>
                          <td><code>getStatus()</code></td>
                          <td>Get the status of the animation between <code>start</code>, <code>progress</code>, <code>end</code></td>
                        </tr>
                        <tr>
                          <td><code>destroy()</code></td>
                          <td>Reset the SVG but make the instance out of order.</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <br />
                  <p>
                    4. 事件：<br />
                    暂缺--无。
                  </p>
                </div>
              </div>

              <div class="box" id="slimScroll">
                <div class="box-header">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse">
                    <i class="fa fa-minus"></i>
                  </button>
                  <h3 class="box-title">slimScroll</h3>
                </div>
                <div class="box-body">
                  <!-- todo -->
                  <p>官网：<a href="http://rocha.la/jQuery-slimScroll/">slimScroll</a></p>
                  <p>d3-ease官网：<a href="https://github.com/rochal/jQuery-slimScroll">slimScroll-github</a></p>
                  <p>小型jquery插件，用于生成垂直滚动条的，很友好，也很方便，经常搭配Position:absolute使用。</p>
                  <br />
                  示例：<br />
                  <div class="row">
                    <div class="col-xs-6">
                      <div class="bg-blue" id="ex-Scroll">
                        <ul>
                          <li>这是一个ul-li列表1</li>
                          <li>这是一个ul-li列表2</li>
                          <li>这是一个ul-li列表3</li>
                          <li>这是一个ul-li列表4</li>
                          <li>这是一个ul-li列表5</li>
                          <li>这是一个ul-li列表6</li>
                          <li>这是一个ul-li列表7</li>
                          <li>这是一个ul-li列表8</li>
                          <li>这是一个ul-li列表9</li>
                          <li>这是一个ul-li列表10</li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <br />
                  <p>
                    1. 使用：<br />
                    1.1 js：<br />
                    <pre><code class="Html">&lt;script src="../Content/plugins/slimScroll/jquery.slimscroll.min.js"&gt;&lt;/script&gt;</code></pre>
                    1.2 Dom：<br />
                    <pre><code class="Html">&lt;div id="ex-Scroll"&gt;......&lt;/div&gt;</code></pre>
                    1.3 激活<br />
                    <pre><code class="JavaScript">$('#ex-Scroll').slimScroll({height:'100px'});</code></pre>
                  </p>
                  <br />
                  <p>2. 参数：挑几个重点的翻译一下。</p>
                  <div class="table-responsive">
                    <table class="table table-hover table-bordered">
                      <thead>
                        <tr>
                          <th>参数</th><th>默认值</th><th>描述</th>
                        </tr>
                      </thead>
                      <tbody>
                          <tr><td>width</td><td>'auto'</td><td> width in pixels of the visible scroll area</td></tr>
                          <tr><td>height</td><td>'250px'</td><td>滚动区域的可视高度</td></tr>
                          <tr><td>size</td><td>'7px'</td><td>滚动条的宽度</td></tr>
                          <tr><td>color</td><td>'#000'</td><td>滚动条的颜色</td></tr>
                          <tr><td>position</td><td>'right'</td><td>滚动条的位置：'left'/'right'</td></tr>
                          <tr><td>distance</td><td>'1px'</td><td>滚动条距离边缘的宽度</td></tr>
                          <tr><td>start</td><td>'top'</td><td>默认显示顶部还是底部：top/bottom/$('selector')</td></tr>
                          <tr><td>opacity</td><td>.4</td><td>透明度</td></tr>
                          <tr><td>alwaysVisible</td><td>false</td><td>关闭自动隐藏</td></tr>
                          <tr><td>disableFadeOut</td><td>false</td><td> check if we should hide the scrollbar when user is hovering over</td></tr>
                          <tr><td>railVisible</td><td>false</td><td>轨道可见性</td></tr>
                          <tr><td>railColor</td><td>'#333'</td><td> sets rail color</td></tr>
                          <tr><td>railOpacity</td><td>.2</td><td> sets rail opacity</td></tr>
                          <tr><td>railDraggable</td><td>true</td><td> whether  we should use jQuery UI Draggable to enable bar dragging</td></tr>
                          <tr><td>railClass</td><td>'slimScrollRail'</td><td> defautlt CSS class of the slimscroll rail</td></tr>
                          <tr><td>barClass</td><td>'slimScrollBar'</td><td> defautlt CSS class of the slimscroll bar</td></tr>
                          <tr><td>wrapperClass</td><td>'slimScrollDiv'</td><td> defautlt CSS class of the slimscroll wrapper</td></tr>
                          <tr><td>allowPageScroll</td><td>false</td><td> check if mousewheel should scroll the window if we reach top/bottom</td></tr>
                          <tr><td>wheelStep</td><td>20</td><td> scroll amount applied to each mouse wheel step</td></tr>
                          <tr><td>touchScrollStep</td><td>200</td><td> scroll amount applied when user is using gestures</td></tr>
                          <tr><td>borderRadius</td><td>'7px'</td><td> sets border radius</td></tr>
                          <tr><td>railBorderRadius</td><td>'7px'</td><td> sets border radius of the rail</td></tr>
                      </tbody>
                    </table>
                  </div>
                  <br />
                  <p>3. 方法：</p>
                  <p>暂缺</p>
                  <br />
                  <p>4. 事件：</p>
                  <p>暂缺</p>
                </div>
              </div>

              <div class="box" id="Done">
                <div class="box-header">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse">
                    <i class="fa fa-minus"></i>
                  </button>
                  <h3 class="box-title">已经介绍过的插件</h3>
                </div>
                <div class="box-body">
                  <h4><a href="UIButton.html#b36btn">b36btn</a></h4>
                  <p>经过我改进过的36个按钮样式，轻巧易用。</p>
                  <br />
                  <h4><a href="UIButton.html#buttons">buttons</a></h4>
                  <p>Buttons 是一个高度可定制的、免费并且开源的按钮 CSS 样式库。</p>
                  <br />
                  <h4><a href="CalendarAndTime.html">bootstrap-datetimepicker</a></h4>
                  <p>修复了一些bug的时间插件。</p>
                  <br />
                  <h4><a href="UISliderAndModal.html#BootstrapSliderBox">bootstrap-slider</a></h4>
                  <p>Bootstrap Slider 是 Jquery UI Bootstrap 中的一部分，CSS 4kb，js 21kb，是轻量的 slider UI插件。</p>
                  <br />
                  <h4><a href="FormEditor.html">bootstrap-wysiwyg</a></h4>
                  <p>这是一个优秀的轻量富文本编辑器，进行大量的定制化操作。</p>
                  <br />
                  <h4><a href="DashBoard.html#chartjs">chartjs</a></h4>
                  <p>轻量级图形库（51k），可画6种图形</p>
                  <br />
                  <h4><a href="DashBoard.html#Plitly">Plitly.js</a></h4>
                  <p>重量级图形库（1.11M），可画20种图表类型，包括 3D 图表，统计图表，和 SVG 地图。</p>
                  <br />
                  <h4><a href="Tables.html#SimpleTable">SimpleTable</a></h4>
                  <p>这是一个简易的表格样式</p>
                  <br />
                  <h4><a href="Tables.html#DataTable">datatables</a></h4>
                  <p>Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。</p>
                  <br />
                  <h4><a href="UIIcon.html#FontAwesome">font-awesome</a></h4>
                  <p>字体图标集</p>
                </div>
              </div>

            </section>
            <div class="Affix">
              <ul class="nav nav-tabs nav-stacked">
                <li><a href="#fastclick">fastclick</a></li>
                <li><a href="#iCheck">iCheck</a></li>
                <li><a href="#highlight">highlight</a></li>
                <li><a href="#placeholder">placeholder</a></li>
                <li><a href="#segment-letters">segment-letters</a></li>
                <li><a href="#vivus">vivus</a></li>
                <li><a href="#slimScroll">slimScroll</a></li>
                <li><a href="#Done">已经介绍过的插件</a></li>
              </ul>
            </div>
          </div>

        </section><!-- end content -->
      </div>

      <footer class="main-footer">
        <div class="pull-right hidden-xs">
          <b>Version</b> <span>1.0</span>
        </div>
        <div><a href="https://github.com/huangjunse/AdminSE">Fork On Github</a></div>
      </footer>
      
      <!-- 右侧配置栏 -->      
      <aside class="control-sidebar control-sidebar-dark">                
        <!-- 组合表 -->
        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
          <!-- 默认包含一个control-sidebar-theme-setting-tab，通过theme_setting.js控制 -->
          <!-- 另外，control-sidebar-home-tab是必须存在的，因为是默认表的依赖 -->
          <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home fa-fw"></i></a></li>
        </ul>
        <!-- 表内容 -->
        <div class="tab-content">
          <!-- 第一个表主体 -->
          <div class="tab-pane" id="control-sidebar-home-tab">
            <h3 class="control-sidebar-heading">附加信息</h3>
            <ul class='control-sidebar-menu'>
              <li>
                <p style="margin: 10px;">
                  <div><a href="https://github.com/huangjunse/AdminSE">Fork On Github</a></div>

                </p>
              </li>
            </ul>
          </div><!-- end 第一个表主体 -->
        </div>
      </aside><!-- end 右侧配置栏 -->
      <div class='control-sidebar-bg'></div>
    </div><!-- ./wrapper -->

    <div class="modal fade modal-danger" id="ErrorModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">错误</h4>
          </div>
          <div class="modal-body" id="ErrorModalBody">
            
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline" onclick="location.reload()">刷新页面</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 开始加载js脚本 -->
    <script src="../Content/plugins/jquery/jquery.min.js"></script>
    <script src="../Content/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="../Content/plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
    <script src='../Content/plugins/fastclick/fastclick.min.js'></script>
    <script src='../Content/plugins/iCheck/icheck.min.js'></script>
    <script src="../Content/plugins/toastr/toastr.min.js" type="text/javascript"></script>
    <script src="../Content/plugins/highlight/highlight.min.js" type="text/javascript"></script>
    <script src="../Content/dist/js/base.js" type="text/javascript"></script>
    <script src="../Content/dist/js/mainmenu.js" type="text/javascript"></script>

    <!-- 页面专属js -->
    <script src="../Content/plugins/segment-letters/segment.min.js"></script>
    <script src="../Content/plugins/segment-letters/d3-ease.v0.6.js"></script>
    <script src="../Content/plugins/segment-letters/letters.js"></script>
    <script src="../Content/plugins/vivus/vivus.min.js"></script>
    <script src="../Content/dist/js/pages/Plugins.js" type="text/javascript"></script>

    <!-- 基础功能及皮肤js，由于依赖的关系，需要页面完全生成完毕才能加载，故放在最后 -->
    <script src="../Content/dist/js/app.min.js" type="text/javascript"></script>
    <script src="../Content/dist/js/theme_setting.min.js" type="text/javascript"></script>
  </body>
</html>